<template>
	<view class="outBox">
		<Header bgColor="transparent" :noMargin="true" class="headerBox">
			<view class="header" :style="{height:barHeight + 'px'}">
			</view>
		</Header>
		<VideoBox>
			<template #content>
				<view class="title">
					<image src="/static/title.png" mode="widthFix"></image>
				</view>
				<view class="menus">
					<view class="menuOut" v-for="(item,index) in menus" :key="index">
						<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,item.url)"
							v-if="!item.isOther && item.name">
							<image :src="item.icon" mode="widthFix"></image>
							<text>{{ item.name }}</text>
						</view>
						<view class="menu" @click="doSomeSthingByLogin(userLoginRef,doScan2)"
							v-else-if="item.isOther && item.name == '呼叫服务'">
							<image :src="item.icon" mode="widthFix"></image>
							<text>{{ item.name }}</text>
						</view>
						<view class="otherMenu" v-else-if="item.isOther && item.name == '一键分享'">
							<button open-type="share" class="menu">
								<image :src="item.icon" mode="widthFix"></image>
								<text>{{ item.name }}</text>
							</button>
						</view>
						<view class="otherMenu" v-else-if="item.isOther && item.name == '我的客服'">
							<button open-type="contact" class="menu">
								<image :src="item.icon" mode="widthFix"></image>
								<text>{{ item.name }}</text>
							</button>
						</view>
						<view class="menu" @click="goToTabBar('/pages/pickUp/index')"
							v-else-if="item.isOther && item.name == '组局'">
							<image :src="item.icon" mode="widthFix"></image>
							<text>{{ item.name }}</text>
						</view>
						<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,item.url)"
							v-else-if="item.isOther && item.name == '加入拼卡'">
							<image :src="item.icon" mode="widthFix" style="width: 90rpx;margin-bottom: 40rpx;"></image>
							<text>{{ item.name }}</text>
						</view>
						<!-- @click="doSomeSthingByLogin(userLoginRef,getnav,item.url)" -->
						<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,item.url)"
							v-else-if="item.isOther && item.name == '发起拼卡' && isCanPin">
							<image :src="item.icon" mode="widthFix" style="width: 90rpx;margin-bottom: 40rpx;"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>

				</view>
				<view class="menus2">
					<!-- <view class="menu" @click="showWait()"> -->
					<view class="menu" @click="doSomeSthingByLogin(userLoginRef,getnav,'/pages/reservation/choice')">
						<image :src="`${baseImgUrl}home/menuIcon5.png`" mode="widthFix" ></image>
						<text>预约座位</text>
					</view>
					<!-- <view class="menu" @click="showWait()"> -->
					<view class="menu" @click="doSomeSthingByLogin(userLoginRef,doScan)">
						<image :src="`${baseImgUrl}home/menuIcon6.png`" mode="widthFix" ></image>
						<text>扫码点餐</text>
					</view>
				</view>
			</template>
		</VideoBox>
		<Tabbar :currentTab="0"></Tabbar>
		<userLogin ref="userLoginRef" @doFunc="getDataList" />
		<DiaBox ref="diaBox" @comfireFunc="comfireFunc" title="公告" :isClose="false" :show-cancel="false"
			:showBtns="true">
			<template slot="dia-cont">
				<view class="textBox">
					<p>亲爱的FOMOxyz用户，为了维护社区的和谐生态，将于2025年3月21日起，对线上预订流程进行优化（针对T区S区）：</p>
					<p>1.小程序线上预订功能，仅对已实名认证的、已加入社区的账户开放。</p>
					<p>2.节假日未经社区主理人同意，不允许跨社区改订台人；工作日20：00后不允许改订台人。</p>
					<p>3.节假日21：00-21：15，订台人到现场付费开台，超时取消预订，订金转入电子账户（详见电子账户规则）；付费开台后，21：30开始2次巡台，都不合格取消预订（当台人数少于3人）。</p>
				</view>
			</template>
		</DiaBox>
	</view>
</template>

<script>
	import Tabbar from '../../components/tabbar.vue';
	import Header from '../../components/header.vue';
	import VideoBox from '../../components/VideoBox/index.vue'
	import {
		bannerList,
		callWaiterApi,
		findCustomerInfoApi,
		getOrdershareCounter,
		relationExaminePermissionApi,
		isInWhiteListApi
	} from '../../api/api';
	import {
		getDateForYmd,
		getWXStatusHeight,
		getImgUrlLocal
	} from '@/utils/index.js'
	import DiaBox from "@/components/diaBox/index.vue";

	export default {
		components: {
			DiaBox,
			Header,
			Tabbar,
			VideoBox
		},
		onShareAppMessage(res) {
			return {
				title: 'FOMOXYZ',
				path: `/pages/home/index`
			}
		},
		data() {
			return {
				barHeight: 0, // 状态栏高度
				menuHeight: 0, // 状态栏 + 刘海高度
				bannerList: [
					'https://img0.baidu.com/it/u=1820622523,1497654983&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				current: 0, // 轮播当前值
				baseImgUrl: this.$baseImgUrl,
				videoUrl: this.$videoUrl,
				counterNo: '',
				userLoginRef: null,
				menus: [{
						name: '我的收入',
						icon: `${this.$baseImgUrl}home/menuIcon2.png`,
						url: '/pages/distribution/index',
						isOther: false
					}, {
						name: '人员绑定',
						icon: `${this.$baseImgUrl}home/menuIcon1.png`,
						url: '/pages/manager/index',
						isOther: false
					}, {
						name: '我的社区',
						icon: `${this.$baseImgUrl}home/menuIcon8.png`,
						url: '/pages/distribution/system',
						isOther: false
					}, {
						name: '玩法说明',
						icon: `${this.$baseImgUrl}home/menuIcon7.png`,
						url: '/pages/home/description',
						isOther: false
					}, {
						name: '呼叫服务',
						icon: `${this.$baseImgUrl}home/menuIcon9.png`,
						url: '',
						isOther: true
					}, {
						name: '我的客服',
						icon: `${this.$baseImgUrl}home/menuIcon10.png`,
						url: '',
						isOther: true
					}, {
						name: '酒水寄存',
						icon: `${this.$baseImgUrl}home/menuIcon3.png`,
						url: '/pages/mine/storingWine',
						isOther: false
					}, {
						name: '一键分享',
						icon: `${this.$baseImgUrl}home/menuIcon4.png`,
						url: '/pages/share/index',
						isOther: true
					}, {
						name: '加入拼卡',
						icon: getImgUrlLocal('/home/pinka1.png'),
						url: '/pages/mine/cardCombination/index',
						isOther: true
					},
					{
						name: '发起拼卡',
						icon: getImgUrlLocal('/home/pinka2.png'),
						url: '/pages/mine/cardCombination/initiatedPinka',
						isOther: true
					},
				],
				menus2: [{
					name: '预约座位',
					icon: `${this.$baseImgUrl}home/menuIcon5.png`,
					url: '/pages/reservation/choice'
				}, {
					name: '扫码点餐',
					icon: `${this.$baseImgUrl}home/menuIcon6.png`,
					url: 'scan'
				}],
				videoPath: "",
				isCanPin: false, // 是否可以拼卡
				isCanOrderTable: false, // 是否可以定桌
				isFirstEnter: {},
				timer: null,
				timer2: null,
			}
		},


		onLoad(option) {
			let obj = getWXStatusHeight()
			this.barHeight = obj.barHeight
			this.menuHeight = obj.menuHeight

			console.log(obj, "obj");
			this.userLoginRef = this.$refs.userLoginRef
			
			this.menus = this.menus.filter(item => item.name)
			findCustomerInfoApi()
			this.loadCustomFont()
			const isLogin = uni.getStorageSync('isNeedLogin')
			if (isLogin) {
				this.$refs.userLoginRef.showLogin = true
				uni.removeStorageSync('isNeedLogin')
			}
		},
		onShow() {
			// this.getVideoFile()
			this.getDataList()
			this.showInfoBox()
			
		},
		methods: {
			// 在页面onLoad或app.js中加载（确保尽早执行）
			loadCustomFont() {
			  const url = 'https://fomoclub.top/resource/ttf/ysbth.ttf';
			  uni.loadFontFace({
			    global: true,
			    family: 'chunlian',
			    source: `url("${url}")`,
			    success: () => {
			      console.log('字体加载成功');
			      // 加载成功后触发重绘（解决安卓偶尔不生效问题）
			      this.$forceUpdate(); // Vue框架
			      // 若使用原生小程序，可修改data触发重渲染
			    },
			    fail: (err) => {
			      console.error('字体加载失败：', err);
			      // 失败时可降级使用系统字体
			    },
			    complete: () => {
			      // 无论成功失败都执行
			    }
			  });
			},
			comfireFunc() {
				if (this.isFirstEnter.flag == '是') {
					// 判断时间是否过去5秒
					if (Date.now() - this.timer < 5000) {
						this.$refs.diaBox.show = true
						uni.$u.toast('阅读5秒可关闭')
					} else {
						const date = getDateForYmd()
						this.isFirstEnter.flag = '否'
						this.isFirstEnter.date = date
						this.$refs.diaBox.show = false
						uni.setStorageSync('isFirstEnter', this.isFirstEnter)
					}
				} else {
					this.$refs.diaBox.show = false
				}
			},
			showInfoBox() {
				const isFirstEnter = uni.getStorageSync('isFirstEnter')
				if (isFirstEnter) return

				this.$refs.diaBox.show = true
				// 记录当前时间
				this.timer = Date.now()
				this.isFirstEnter.flag = '是'
				const date = getDateForYmd()
				this.isFirstEnter.date = date

				// 开启定时器，刷新提示语 每一秒刷新一次 5秒后结束
				this.timer2 = setInterval(() => {
					// 剩余时间
					let time = 5 - Math.floor((Date.now() - this.timer) / 1000)
					if (time <= 0) {
						clearInterval(this.timer2)
					}
				}, 1000)
			},
			// 获取可选的卡台
			async getDataList() {
				const res = await isInWhiteListApi()
				if (res.code == 200) {
					this.isCanPin = res.data
				}
			},
			// 获取视频资源文件
			// async getVideoFile() {
			// 	const res = await saveVideoFile()
			// 	this.videoPath = res
			// },
			goToTabBar(url) {
				uni.switchTab({
					url
				})
			},
			showWait() {
				this.$toast("敬请期待")
			},
			// 扫码
			doScan2() {
				const _this = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						_this.afterScanCode2(res)
					}
				})
			},
			async afterScanCode2(res) {
				let codeStr = decodeURIComponent(res.result)
				const urlObj = this.getParamobj(codeStr)
				if (!urlObj.counterNo) return this.$toast("counterNo为空")

				const res1 = await callWaiterApi(urlObj.counterNo)
				if (res1.code == 200) uni.$u.toast("呼叫成功")
			},
			// 扫码
			doScan() {
				const _this = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						_this.afterScanCode(res)
					}
				})
			},
			afterScanCode(res) {
				let codeStr = decodeURIComponent(res.result)
				const urlObj = this.getParamobj(codeStr)
				if (!urlObj.counterNo) return this.$toast("counterNo为空")
				this.counterNo = urlObj.counterNo
				uni.setStorageSync('counterNo', urlObj.counterNo)
				this.getnav("/pages/order/list?counterNo=" + this.counterNo)
			},
			getParamobj(path) { //根据url里的参数，全部转换为obj
				if (path.split("#/?").length > 1) {
					if (path.split("?").length > 1) {
						var params = path.split("?")[1].split("&")
						var obj = {}
						params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
						return obj;
					} else return '';
				} else {
					if (path.split("#").length > 1) {
						path = path.split('#')[0];
					}
					if (path.split("?").length > 1) {
						var params = path.split("?")[1].split("&")
						var obj = {}
						params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
						return obj;
					} else return '';
				}
			},
			// 获取广告列表
			async getBannerList() {
				const res = await bannerList()
				this.bannerList = res.data.map(item => {
					return {
						...item,
						title: item.bannerTitle
					}
				})
			},
			// 获取登陆信息
			async getIsLogin() {
				if (!uni.getStorageSync('token') || (uni.getStorageSync('userInfo') == "null" || !uni.getStorageSync(
						"userInfo"))) {
					// if (!uni.getStorageSync('token')){
					console.log("执行了");
					uni.setStorageSync('showLogin', true)
					this.$refs.userLoginRef.showLogin = true
					return false
				} else {
					const res = await findCustomerInfoApi()
					if (res.code == 501) {
						this.$refs.userLoginRef.showBinding()
					}
				}
				return true
			},
		}
	}
</script>

<style lang="scss">
	.menuOut {
		display: flex;
		justify-content: center;
	}

	.menus2 {
		display: grid;
		width: calc(100% - 68rpx);
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		position: absolute;
		bottom: 240rpx;
		left: 50%;
		transform: translateX(-50%);
		justify-content: space-between;

		.menu {
			flex: 1;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 62rpx;
			border: 2rpx solid #262a3c;
			backdrop-filter: blur(7px);
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 160rpx;
				margin-right: 30rpx;
				margin-left: -20rpx;
			}

			text {
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				// 不换航
				white-space: nowrap;
				margin-left: -30rpx;
			}
		}
	}

	.menus {
		display: grid;
		grid-template-columns: repeat(4, 1fr);

		.otherMenu {
			width: 160rpx;
		}

		.menu {
			display: flex;
			align-items: center;
			flex-direction: column;
			position: relative;
			background: transparent;

			text {
				position: absolute;
				bottom: 30rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
				text-align: center;
				font-style: normal;
				position: relative;
			}

			image {
				width: 160rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.outBox {
		display: flex;
		flex-direction: column;
	}

	.content {
		position: absolute;
		top: 0;
		width: 100%;
		flex: 1;
		height: 100vh;
		z-index: 2;

		.title {
			text-align: center;
			margin-bottom: 88rpx;

			image {
				width: 448rpx;
			}
		}
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		color: #fff;

		.iconMsg {
			image {
				width: 200rpx;
			}
		}

		.name {
			color: #fff;
		}
	}

	.textBox {

		p {
			color: #fff;
			margin-top: 20rpx;
			font-weight: 600;
			font-size: 28rpx;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-align: center;
		}

	}
</style>